<template>
  <div class="bg">
    <!-- 登录页面 -->
    <div class="wholebox" v-if="pdzt">
      <div class="sign">
        <h1>Login</h1>
      </div>
      <div>
        <form action="" class="inputbox"></form>
        <input type="text" v-model="loginForm.username" placeholder="用户名" />
        <br />
        <input
          type="password"
          v-model="loginForm.password"
          placeholder="密码"
        />
        <br />
      </div>
      <!-- 按钮 -->
      <div class="anniu">
        <button class="btn btn1" @click="loginClick" type="button">登录</button>
      </div>
    </div>

    <!-- 注册页面 -->
    <div class="wholebox" v-if="!pdzt">
      <div class="sign">
        <h1>注册</h1>
      </div>
      <!-- 用户信息 -->
      <div class="yhxx">
        <!-- 用户昵称 -->
        <div>
          <span>用户昵称:</span>
          <input
            type="text"
            v-model="zhuceForm.nickname"
            placeholder="用户昵称"
          />
        </div>
        <!-- 注册手机号 -->
        <div>
          <span>注册手机号:</span>
          <input
            type="text"
            v-model="zhuceForm.mobile"
            placeholder="注册手机号"
          />
        </div>
        <!-- 账号 -->
        <div>
          <span>账号:</span
          ><input
            type="text"
            v-model="zhuceForm.username"
            placeholder="用户名"
          />
        </div>
        <!-- 密码 -->
        <div>
          <span>密码:</span
          ><input
            type="password"
            v-model="zhuceForm.password"
            placeholder="密码"
          />
        </div>
        <!-- 确定密码 -->
        <div>
          <span>确定密码:</span>
          <input
            type="password"
            v-model="zhuceForm.qrmm"
            placeholder="确定密码"
          />
        </div>
      </div>
      <!-- 按钮 -->
      <div class="anniu">
        <button class="btn btn2" @click="zhuceClick" type="button">注册</button>
      </div>
    </div>

    <!-- 切换注册或登录 -->
    <button @click="pdzt = !pdzt">
      {{ pdzt ? "没有" : "已有" }}账号？去{{ pdzt ? "注册" : "登录" }}
    </button>
    <NavBarVue></NavBarVue>
  </div>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "test",
        password: "123456",
      },
      zhuceForm: {
        // 昵称
        nickname: "",
        // 手机号
        mobile: "",
        //账号
        username: "",
        // 密码
        password: "",
        // 确认密码
        qrmm: "",
      },
      // 判断现在是登录还是注册 true登录 false注册
      pdzt: true,
    };
  },
  methods: {
    loginClick() {
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$toast("请输入用户名和密码");
      } else {
        axios
          .post("http://localhost:8080/user/login", this.loginForm, {
            // 在前端使用 axios.post 发送 POST 请求时，默认使用 JSON 格式传递数据，而在后端的代码中使用的是表单数据的方式进行解析。这时候可以尝试在 Axios 请求头中指定请求数据的格式：
            headers: {
              "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
            },
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.code == 0) {
              this.$auth.setAuthorization(" "+res.data.data.token);
              localStorage.setItem("Userdata", JSON.stringify(this.loginForm));
              // this.$auth.setUserdata(this.loginForm);

              this.$router.push("/my");
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(r=>{});
      }
    },
    // 用户注册
    zhuceClick() {
      // 判断是否满足注册资格
      let pd = true;
      for (const item in this.zhuceForm) {
        // console.log(this.zhuceForm[item]);
        if (this.zhuceForm[item] == "") {
          alert("请填写完整表单");
          pd = false;
          return;
        }
        if (item == "qrmm") {
          if (this.zhuceForm["password"] != this.zhuceForm["qrmm"]) {
            alert("确认密码必须与密码一致");
            pd = false;
            return;
          }
        }
      }
      if (pd) {
        this.$http
          .post("http://localhost:8080/user/register", this.zhuceForm, {
            // 在前端使用 axios.post 发送 POST 请求时，默认使用 JSON 格式传递数据，而在后端的代码中使用的是表单数据的方式进行解析。这时候可以尝试在 Axios 请求头中指定请求数据的格式：
            headers: {
              "Content-Type": "application/x-www-form-urlencoded", // 或者 'multipart/form-data'
            },
          })
          .then((res) => {
            console.log(res.data);
            this.pdzt = true;
          });
      }
    },
  },
  components:{NavBarVue}
};
</script>

<style scoped>
.yhxx {
  background-color: rgba(212, 212, 212, 0.63);
}
.yhxx > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: baseline;
}
.yhxx > div > input {
  margin-right: 30px;
  margin-left: 20px;
}
.anniu {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: "Open Sans", sans-serif;
  background: url("../../public/bg2.jpg");
  background-size: cover;
}
h1 {
  color: rgb(255, 255, 255);
  letter-spacing: 3px;
  text-align: center;
  font-size: 2em;
}
input {
  width: 220px;
  height: 20px;
  margin-bottom: 20px;
  padding: 10px 10px 10px 18px;
  font-size: 13px;
  color: white;
  border: none;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    rgb(85, 110, 66, 0.9),
    rgb(216, 207, 198, 0.9)
  );
}
.btn {
  height: 40px;
  width: 150px;
  border: none;
  font-size: 15px;
  border-radius: 8px;
}
.btn1 {
  background-color: rgba(178, 255, 168, 0.9);
  color: rgb(0, 0, 0);
}

.btn2 {
  background-color: rgba(255, 144, 144, 0.9);
  color: rgb(0, 0, 0);
}

.sign {
  font-size: 20px;
  margin-bottom: 20px;
}
.wholebox {
  margin-top: 200px;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: rgb(9, 17, 55);
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(9, 17, 55);
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: rgb(9, 17, 55);
}
</style>